<template>
	<view class="">

		<view class="" style="height: 140rpx;">

		</view>
		<view class="footer">
			<view @tap="openComment" class="flex a-c ipt">
				<text class="send_f">说点什么吧！</text>
			</view>
			<view class="flex j-s a-c" style="flex:1">
				<view class="footer_icon">
					<uni-icons @tap="openComment" type="chat" size="30"></uni-icons>
					<text v-if="reply_num>0" class="subscript">{{reply_num}}</text>
				</view>
				<view @tap="onlike" class="footer_icon">
					<uni-icons :color="islike?'red':''" :type="islike?'heart-filled':'heart'" size="30"></uni-icons>
					<text v-if="like_num>0" class="subscript" :class="islike?'mark':'nomark'">{{like_num}}</text>
				</view>
				<view @tap="oncollect" class="footer_icon">
					<uni-icons :color="iscollect?'red':''" :type="iscollect?'star-filled':'star'" size="30"></uni-icons>
					<text v-if="collect_num>0" class="subscript"
						:class="iscollect?'mark':'nomark'">{{collect_num}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			//回复数
			reply_num: {
				type: Number | String,
				default: function(e) {
					return 0
				}
			},
			//点赞数
			like_num: {
				type: Number | String,
				default: function(e) {
					return 0
				}
			},
			//收藏数
			collect_num: {
				type: Number | String,
				default: function(e) {
					return 0
				}
			},
			//是否点赞
			islike: {
				type: Boolean,
				default: function(e) {
					return false
				}
			},
			//是否收藏
			iscollect: {
				type: Boolean,
				default: function(e) {
					return false
				}
			},
		},
		methods: {
			async openComment() { 
				this.Http.is_login() ? this.$emit('openComment') : '' 
			},
			onlike() {
				this.$emit('onlike');
			},
			oncollect() {
				this.$emit('oncollect');
			}

		}
	}
</script>

<style scoped lang="scss">
	.footer {
		display: flex;
		position: fixed;
		bottom: 0rpx;
		height: 120rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 29;
		border-top: solid 2rpx #F5F5F5;
		padding: 0 20rpx;
		align-items: center;

		.ipt {
			width: 55%;
			background-color: #F5F5F5;
			align-items: center;
			height: 60rpx;
			border-radius: 99rpx;
		}

		.send_f {
			margin-left: 20rpx;
			color: #C0C0C0;
		}

		.footer_icon {
			position: relative;
		}

		.subscript {
			position: absolute;
			top: -10rpx;
			left: 45rpx;
			font-size: 22rpx;

			background-color: #fff;
			padding: 0 5rpx;
			border-radius: 10rpx;
		}

		.mark {
			color: red;
		}

		.nomark {
			color: #333;
		}
	}
</style>